<!-- 历史轨迹-->

<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" :isExport="false"/>
        <!-- 报表检索条件组件 -->
        <ReportSearch :loading="loading" :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm"
            @handleSearchForm="handleSearchForm" @handleResetForm="handleResetForm" />
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';

import * as local from '@/utils/cache/localStorage';
import * as server from '@/api/modules/technicalDataAnalysis';
import * as basicServer from '@/api/modules/common';

import { getYesterday, getCurTime } from '@/utils/date';
import { apiFn, deepCopy } from '@/utils/utilFns';

// 报表表格标题
const defaultTitle = '历史轨迹';
const tableTitle = ref(defaultTitle);

// 报表标题信息
const titleInfo = reactive({
    title: '历史轨迹',
    description: ""
});

// 默认表单数据
const defaultSearchForm = {
    orgIds: local.getItem('defaultOrgIds'),
    timeFrame: [`${getYesterday(0)} 00:00:00`, getCurTime()],
    vehicleNumber: [],
};

// 加载状态
const loading = ref(false);

// 表头数据
const tableColumnData = ref([]);

// 表格数据
const tableData = ref([]);

// 表头宽度数据
const tableColumnWidthData = ref({});

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'selectTree',
        label: '所属组织',
        prop: 'orgIds',
        options: [],
        api: () => { },
        placeholder: '请选择所属组织',
        rules: [{ required: true, message: '请选择所属组织', trigger: ['blur, change'] }]
    },
    {
        id: 1,
        type: 'selectNumber',
        prop: 'vehicleNumber',
        label: '车辆编号',
        options: [],
        api: () => { },
        placeholder: '请选择',
        rules: [{ required: true, message: '请选择', trigger: ['change'] }]
    },
    {
        id: 2,
        type: 'dateTimeRangePicker',
        prop: 'timeFrame',
        label: '时间范围',
        options: [],
        api: () => { },
        placeholder: '请选择时间范围',
        rules: [{ required: true, message: '请选择时间范围', trigger: ['change'] }]
    }
]);

// 表单数据
const searchForm = reactive(deepCopy(defaultSearchForm));

onMounted(() => {
    getEquipNumberOptions();
});

// 所属组织变化监听
watch(() => searchForm.orgIds, () => {
    searchForm.vehicleNumber = [];
    getEquipNumberOptions();
});

// 获取设备编号
const getEquipNumberOptions = () => {
    let params = {
        like: { orgId: searchForm.orgIds },
        equal: { vehicleCategory: '1, 2' }
    };

    apiFn(basicServer.getNumberList, params)
        .then((res) => {
            const { code, data = [] } = res;
            if (code === '200') {
                searchFormDatas.value[1]['options'] = data
            }
        }).catch(() => {
            searchFormDatas.value[1]['options'] = [];
        });
};

// 获取查询参数
const getParams = () => {
    const { orgIds, timeFrame, vehicleNumber } = searchForm;
    const { pageSize, currentPage } = pageInfo;

    const vehicleNo = getVehicleNo(vehicleNumber);

    const params = {
        equal: {
            startTime: timeFrame[0],
            endTime: timeFrame[1],
            orgId: orgIds,
            vehicleNo,
            vehicleVin: vehicleNumber
        },
        limit: pageSize,
        page: currentPage,
    };

    return params;
};

// 获取车辆编号
const getVehicleNo = (vin) => {
    const options = searchFormDatas.value[1]['options'];

    const target = options.find(item => item.value === vin);

    const vehicleNo = target ? target.name : '';

    return vehicleNo;
};

// 获取报表列表内容
const getTableList = () => {
    const params = getParams();
    loading.value = true;
    apiFn(server.getMessageTableList, params)
        .then(res => {
            const { code, data, recordsTotal } = res;
            if (code === '200') {
                if (data.length > 0) {
                    tableData.value = data;
                } else {
                    tableData.value = [];
                }

                pageInfo.total = recordsTotal;
            }
        }).catch(() => {
            tableData.value = [];
            pageInfo.total = 0;
        }).finally(() => {
            loading.value = false;
        })
};

// 查询
const handleSearchForm = (type) => {
    if (loading.value) return;

    getTableList();
};

// 重置
const handleResetForm = () => {
    Object.keys(searchForm).forEach(key => {
        if (key in defaultSearchForm) {
            searchForm[key] = defaultSearchForm[key];
        }
    });

    getDefaultTime();

    tableData.value = [];
};
</script>

<style lang="scss" scoped></style>